<script lang="ts" setup name="UserDeptList">
import { reactive, ref } from "vue";
import { useJxtechEditTableExt, JxtechEditTableExtColumn } from "@/comp-ext";
import userDeptServiceApi from "@/api/modules/org/bean/user-dept";
import UserDeptFormDialog from "./user-dept-form-dialog.vue";
import UnitSelectInput from "@/views/org/unit/component/unit-select-input.vue";
import { onMounted } from "vue";
import unitServiceApi from "@/api/modules/org/bean/unit";
import StationSelectInput from "@/views/org/jxudp-station/component/jxudp-station-select-input.vue";

const props = defineProps({
  userId: String, //用户的id这个建议必须传入
  unitId: String, //部门id 新增用户时默认带入部门
  authKey: String
});

//JxtechPageTableExt Ref对象
const UserDeptEditTableRef = ref();
const { loadTable, getInputBean, addRowData } = useJxtechEditTableExt(UserDeptEditTableRef);
const editTableColumn: JxtechEditTableExtColumn[] = [
  {
    prop: "unitName",
    label: "部门描述",
    type: "link",
    editType: "slot",
    slot: "customUnitName",
    linkClick: (row: any) => {
      UserDeptListState.currentUserDeptId = row.userDeptId;
      UserDeptListState.dialogVisible = true;
    }
  },
  { prop: "station", label: "岗位", slot: "customStation", editType: "slot" },
  { prop: "userType", label: "用户类型", editType: "select", codeItemId: "USER_TYPE" },
  { prop: "main", label: "主要部门", slot: "mainSlot", editType: "slot" },
  { prop: "orderNum", label: "在部门序号", editType: "input" }
];

const UserDeptListState = reactive({
  //表格的列配置
  userTypeMap: new Map([
    ["1", "主负责人"],
    ["2", "副负责人"],
    ["3", "一般员工"],
    ["4", "第三方接口用户"]
  ]),

  //表格数据加载的方法
  loadData: async () => {
    //return userDeptServiceApi.queryList(null, { userId: props.userId, refCols: 'default' })
    let res = await userDeptServiceApi.queryList(null, {
      userId: props.userId,
      refCols: "default"
    });
    res.data.forEach(element => {
      element.userTypeDesc = UserDeptListState.userTypeMap.get(element.userType);
    });
    return res;
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
    //deletePageTableSelectionDataList(UserDeptPageTableRef, userDeptServiceApi)
  },
  dialogVisible: false,
  currentUserDeptId: "",
  onSaveSuccess: () => {
    UserDeptListState.dialogVisible = false;
    loadTable();
    // UserDeptPageTableRef.value.loadTable()
  },
  //新增数据关联
  onRelationButtonClick: () => {
    // UserDeptListState.currentUserDeptId = '';
    // UserDeptListState.dialogVisible = true;
    //UserDeptListState.addNewUserDeptData();
    addRowData({
      deptId: "",
      unitName: "",
      orderNum: 1,
      userType: "3",
      main: false,
      valid: true
    });
  },
  addNewUserDeptData() {
    if (!props.unitId) return;
    unitServiceApi.queryById(props.unitId).then(res => {
      addRowData({
        ...res.data,
        deptId: props.unitId,
        unitName: res.data.unitName,
        userType: "3",
        main: true,
        orderNum: 0
      });
    });
  }
});

onMounted(() => {
  if (props.unitId) {
    UserDeptListState.addNewUserDeptData();
  }
});

defineExpose({
  loadTable: () => loadTable(),
  getInputBean: () => getInputBean()
});
</script>
<template>
  <div class="UserDeptList">
    <jxtech-basic-card title="用户部门信息">
      <template #operationSpace>
        <jxtech-add-button @click="UserDeptListState.onRelationButtonClick" v-auth="authKey"> </jxtech-add-button>
        <!-- <jxtech-delete-button @click="UserDeptListState.deleteTableData" v-auth="authKey">
      </jxtech-delete-button> -->
      </template>
      <!-- <JxtechPageTableExt ref="UserDeptPageTableRef" row-key="userDeptId" :table-column="UserDeptListState.tableColumn"
      :table-height="480" :load-data="UserDeptListState.loadData">
      <template #mainSlot="{ row }">
        <el-checkbox v-model="row.main" disabled></el-checkbox>
      </template>
    </JxtechPageTableExt> -->
      <!-- <JxtechEditTable ref="UserDeptEditTableRef" :show-footer-add="false" :load-data="UserDeptListState.loadData"
      :table-column="editTableColumn">
      <template #customUnitName="{ row }">
        <unit-select-input v-model:unitId="row.deptId" v-model:unitName="row.unitName"></unit-select-input>
      </template>
    </JxtechEditTable> -->
      <JxtechEditTableExt
        ref="UserDeptEditTableRef"
        :show-footer-add="false"
        :load-data="UserDeptListState.loadData"
        :table-column="editTableColumn"
      >
        <template #customUnitName="{ row }">
          <unit-select-input v-model:unitId="row.deptId" v-model:unitName="row.unitName"></unit-select-input>
        </template>
        <template #customStation="{ row }">
          <StationSelectInput v-model:station-id="row.stationId" v-model:station-name="row.stationName"></StationSelectInput>
        </template>
        <template #mainSlot="{ row }">
          <el-checkbox v-model="row.main"></el-checkbox>
        </template>
      </JxtechEditTableExt>
    </jxtech-basic-card>

    <user-dept-form-dialog
      v-if="UserDeptListState.dialogVisible"
      v-model:visible="UserDeptListState.dialogVisible"
      :user-dept-id="UserDeptListState.currentUserDeptId"
      :user-id="userId"
      @save-success="UserDeptListState.onSaveSuccess"
    ></user-dept-form-dialog>
  </div>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
</style>
